import React, { FC, useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import { useRouter } from '@tarojs/taro'
import api from '@/services/config/index'

import './index.scss'

interface Evaluate {
  title: string
  imagePath: Array<{
    imagePath: string
  }>
  updateAt: string
  buyUser: {
    buyAatarUrl: string
    buyName: string
    createAt: string
    evaluationContent: string
  }
  sellUser: {
    sellAatarUrl: string
    sellName: string
    createAt: string
    evaluationContent: string
  }
}
const SeeEvaluate: FC = () => {
  const [evaluate, setEvaluate] = useState<Evaluate>({
    title: '',
    imagePath: [
      {
        imagePath: ''
      }
    ],
    updateAt: '',
    buyUser: {
      buyAatarUrl: '',
      buyName: '',
      createAt: '',
      evaluationContent: ''
    },
    sellUser: {
      sellAatarUrl: '',
      sellName: '',
      createAt: '',
      evaluationContent: ''
    }
  })
  const { params } = useRouter()
  useEffect(() => {
    api['orderList/getEvaluationDetail']({ orderId: params.orderId }).then((res) => {
      setEvaluate(res.data[0])
    })
  }, [params.orderId])
  return (
    <View className='seeEvaluate page-height grey-bgc'>
      {/* 买家评价 */}
      {evaluate.buyUser.evaluationContent && (
        <View className='seeEvaluate-buyUser flex'>
          <Image src={evaluate.buyUser.buyAatarUrl} className='seeEvaluate-buyUser-autar'></Image>
          <View className='seeEvaluate-buyUser__item'>
            <View className='font28 grey-color'>{evaluate.buyUser.buyName}</View>
            <View className='seeEvaluate-buyUser__item--content font28'>
              {evaluate.buyUser.evaluationContent}
            </View>
            <View className='font24 grey-color'>{evaluate.buyUser.createAt}</View>
            <View className='seeEvaluate-buyUser__item-goods flex'>
              <Image src={evaluate.imagePath[0].imagePath} className='goods-img'></Image>
              <View className='goods-item'>
                <View className='font28'>{evaluate.title}</View>
                <View className='font24 grey-color'>交易成功时间：{evaluate.updateAt}</View>
              </View>
            </View>
          </View>
        </View>
      )}

      {/* 卖家评价 */}
      {evaluate.sellUser.evaluationContent && (
        <View className='seeEvaluate-buyUser flex'>
          <Image src={evaluate.sellUser.sellAatarUrl} className='seeEvaluate-buyUser-autar'></Image>
          <View className='seeEvaluate-buyUser__item'>
            <View className='font28 grey-color'>{evaluate.sellUser.sellName}</View>
            <View className='seeEvaluate-buyUser__item--content font28'>
              {evaluate.sellUser.evaluationContent}
            </View>
            <View className='font24 grey-color'>{evaluate.sellUser.createAt}</View>
            <View className='seeEvaluate-buyUser__item-goods flex'>
              <Image src={evaluate.imagePath[0].imagePath} className='goods-img'></Image>
              <View className='goods-item'>
                <View className='font28'>{evaluate.title}</View>
                <View className='font24 grey-color'>交易成功时间：{evaluate.updateAt}</View>
              </View>
            </View>
          </View>
        </View>
      )}
    </View>
  )
}

export default SeeEvaluate
